<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div
        class="container"
        style="background: linear-gradient(to right, #fcae95 20%, #ee7ba1 80%)"
      >
        <div>
          <p>注册会员数</p>
          <span>{{ allNumber.rmc }}</span>
        </div>
        <el-icon><Avatar /></el-icon>
      </div>
    </el-col>
    <el-col :span="6">
      <div
        class="container"
        style="background: linear-gradient(to right, #9fd4fe 20%, #459af8 80%)"
      >
        <div>
          <p>录入商品数</p>
          <span>{{ allNumber.igc }}</span>
        </div>
        <el-icon><GoodsFilled /></el-icon>
      </div>
    </el-col>
    <el-col :span="6">
      <div
        class="container"
        style="background: linear-gradient(to right, #8cf3e8 20%, #6ddbc9 80%)"
      >
        <div>
          <p>有效订单数</p>
          <span>{{ allNumber.tsc }}</span>
        </div>
        <el-icon><Checked /></el-icon></div
      >
    </el-col>
    <el-col :span="6">
      <div
        class="container"
        style="background: linear-gradient(to right, #eac0fb 20%, #a580e7 80%)"
      >
        <div>
          <p>无效订单数</p>
          <span>{{ allNumber.tfc }}</span>
        </div>
        <el-icon><Failed /></el-icon></div
      >
    </el-col>
  </el-row>
</template>

<script>
import { statisticsDate } from "../api/index";
export default {
  data() {
    return {
      allNumber: {},
    };
  },
  methods: {
    async init() {
      let res = await statisticsDate();
      this.allNumber = res.data;
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.container {
  color: white;
  height: 100px;
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  box-shadow: 1px 1px 10px #e4e7ed;
  i {
    font-size: 60px;
    opacity: 0.7;
  }
  p {
    font-size: 14px;
    padding-bottom: 6px;
  }
  span {
    font-size: 30px;
    font-weight: bolder;
  }
}
</style>
